<template>
  <view class="page">
    <scroll-view class="main-page" scroll-y="true">
      <view class="list-items" v-for="(item, index) in loopData" :key="index">
        <view class="out-box">
          <view class="class-box">
            <view class="image">
              <image class="img" src='./img/icon-class.png'
            ></image>
            </view>
            <view class="text-wrapper">
              <view class="name">{{ item.name }}</view>
              <view class="teacher-name">创建时间：{{ item.created }}</view>
              <view class="join-time">班级人数：{{ item.student_count }}</view>
            </view>
            <view v-if="item.invide_code" class="class-invide_code copy-btn" @click="copyId(item.invide_code)">
              {{ item.invide_code }}
            </view>
            <view v-else class="class-no-invide_code">
              邀请码：-
            </view>
          </view>
          <view class="class-intro">
            <view class="text_5">{{ item.description }}</view>
          </view>
          <view class="class-btn">
            <view v-if="teacher_id == item.teacher_id" class="btn" @click="showDeletePopup(item)">
              <image class="img" src="./img/delete.png"></image>
              删除
            </view>
            <view class="btn" @click="openManage(item)">
              <image class="img" src="./img/manage.png"></image>
              管理
            </view>
          </view>
        </view>
      </view>
      <view class="join-box">
        <view class="join-new" @click="openJoin">
          <image class="icon" src="./img/plus.png"></image>
          创建班级
        </view>
      </view>
    </scroll-view>
    <!-- 弹窗 -->
    <uni-popup ref="popup" background-color="#fff" borderRadius="12px 12px 0px 0px" :mask-click="false">
      <view class="popup-content">
        <view class="popup-header">
          创建班级
          <view class="close-icon" @click="closePopup">
            <image class="close-icon-image" referrerpolicy="no-referrer" src="./img/close.png" />
          </view>
        </view>
        <view class="popup-body">
          <view class="teacher-input-box">
            <input class="popup-input" placeholder="请输入班级名称" v-model="name" />
          </view>
          <view class="box_6 flex-col">
            <view class="text-wrapper_14 flex-row justify-between">
              <text class="text_31">班级说明</text>
              <text class="text_32">{{ tipStr }}</text>
            </view>
            <view class="text-wrapper_15 flex-col">
              <textarea class="text_33" v-model="description" @input="bindTextAreaInput(description)"
                placeholder="请输入班级说明" maxlength="500" />
            </view>
          </view>
          <!-- <view class="code-input-box">
            <input class="popup-input" placeholder="请输入班级邀请码" v-model="code" />
          </view> -->
          <view class="join-btn" @click="requestJoin">创建</view>
        </view>
      </view>
    </uni-popup>
    <!-- 弹窗 -->
    <uni-popup ref="deletePopup" background-color="#fff" borderRadius="12px 12px 0px 0px" :mask-click="false">
      <view class="delete-popup-content">
        <view class="delete-popup-header">
          删除班级
          <view class="close-icon" @click="closeDeletePopup">
            <image class="close-icon-image" referrerpolicy="no-referrer" src="./img/close.png" />
          </view>
        </view>
        <view class="delete-popup-body">
          <view class="delete-btn" @click="handleDelete">确认</view>
        </view>
      </view>
    </uni-popup>
    <bottomBackBtn v-if="showButtom"></bottomBackBtn>
  </view>
</template>
<script>
import API from '@/api/teacherapi'
export default {
  data() {
    return {
      loopData: [],
      showButtom: true,
      tip: '校验信息',
      teacher_name: '',
      code: '',
      joinSucess: false,
      school_name: '',
      student_name: '',
      select_class_id: '',
      tipStr: '0/500',
      description: '',
      name: '',
      teacherData:[],
      teacher_id:''
    };
  },
  async onLoad() {
    await this.getTeacherData()
    await this.loadData()
  },
  methods: {
    async getTeacherData(){
    const res = await API.UserMyTeacherIds({});
    console.log(res);
    this.teacherData = res;
    this.teacher_id = res[0].teacher_id;
  },
    bindTextAreaInput(item) {
      this.tipStr = item.length + '/' + this.tipStr.split('/')[1]
    },
    showDeletePopup(item) {
      this.select_class_id = item.class_id
      this.showButtom = false
      this.$refs.deletePopup.open('bottom')
    },
    openManage(item){
      uni.navigateTo({
        url: '/pages/teacher/my/manage?class_id=' + item.class_id
      })
    },
    closeDeletePopup() {
      this.$refs.deletePopup.close()
      this.showButtom = true
    },
    async handleDelete(item) {
      console.log(item)
      await API.DeleteClazz({ class_id: this.select_class_id })
      uni.showToast({
        title: '删除成功',
        icon: 'success',
        duration: 1500
      })
      this.closeDeletePopup()
      this.loadData()

    },
    async loadData() {
      let param = {
        current: 1,
        pageSize: 999,
        keyword: "",
        for_teacher: true,
      }
      let res = await this.API.ClassPagedList({args:param})

      if (res) {
        this.loopData = res.data
      }
      console.log(this.loopData)
    },
    openJoin() {
      this.showButtom = false
      this.name = ''
      this.description = '';
      this.tipStr = '0/500';
      this.$refs.popup.open('bottom')
    },
    closePopup() {
      this.$refs.popup.close()
      this.showButtom = true
    },
   async requestJoin() {
      if (!this.name) {
        uni.showToast({
          title: '请输入班级名称',
          icon: 'none',
          duration: 1500
        })
        return
      }
      if (!this.description) {
        uni.showToast({
          title: '请输入班级说明',
          icon: 'none',
          duration: 1500
        })
        return
      }
      let param = {
        name: this.name,
        description: this.description,
        teacher_id:this.teacher_id
      }
      await API.CreateClazz(param)
      uni.showToast({
        title: '创建成功',
        icon: 'success',
        duration: 1500
      })
      this.closePopup()
      this.loadData()
    },
    done() {
      this.closePopup()
      this.loadData()
    },
    copyId(id) {
      uni.setClipboardData({
        data: id,
        success() {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
            duration: 1500
          })
        }
      })
    },
  },
};
</script>
<style lang="less" scoped>
.delete-popup-content {
  padding-top: 48rpx;

  .delete-popup-header {
    padding: 0 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #262626;
    height: 50rpx;
    line-height: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .close-icon {
      width: 40rpx;
      height: 40rpx;

      .close-icon-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .delete-popup-body {
    padding: 158rpx 56rpx 0 56rpx;
    height: calc(280rpx + env(safe-area-inset-bottom));

    .delete-btn {
      width: 100%;
      height: 92rpx;
      background: #FF4D4F;
      color: #fff;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      text-align: center;
      line-height: 92rpx;
    }
  }
}

.popup-content {
  padding-top: 48rpx;

  .popup-header {
    padding: 0 48rpx;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    font-size: 34rpx;
    color: #262626;
    height: 50rpx;
    line-height: 50rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .close-icon {
      width: 40rpx;
      height: 40rpx;

      .close-icon-image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .popup-body {
    padding: 32rpx 56rpx calc(32rpx + env(safe-area-inset-bottom)) 56rpx;

    .join-btn {
      width: 100%;
      height: 92rpx;
      background: #2776FF;
      color: #fff;
      border-radius: 12rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 34rpx;
      text-align: center;
      line-height: 92rpx;
    }

    .popup-input {
      height: 128rpx;
      line-height: 128rpx;
      background: #FFFFFF;
      box-shadow: inset 0px -1px 0px 0px #E6EBF1;
      font-size: 32rpx;
      color: #262626;

      &::placeholder {
        color: #BFBFBF;
        font-weight: 400;
        font-size: 32rpx;
      }
    }

    .tip {
      height: 48rpx;
      line-height: 48rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #FF4D4F;
    }

    .teacher-input-box {
      height: 176rpx;

    }

    .code-input-box {
      height: 230rpx;
    }

    .done-img {
      height: 266rpx + 60rpx;
      padding-top: 60rpx;
      display: flex;
      justify-content: center;

      .img {
        width: 322rpx;
        height: 266rpx;
      }
    }

    .title-a {
      margin-top: 56rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #111A34;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    .content-text {
      margin-top: 24rpx;
      height: 218rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #595959;
      line-height: 32rpx;
      text-align: right;
      padding: 0 130rpx;
    }

    .box_6 {
      background-color: rgba(255, 255, 255, 1);
      padding: 38rpx 0 38rpx 0;

      .text-wrapper_14 {
        width: 100%;

        .text_31 {
          overflow-wrap: break-word;
          color: rgba(0, 0, 0, 1);
          font-size: 32rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 52rpx;
        }

        .text_32 {
          overflow-wrap: break-word;
          color: rgba(140, 140, 140, 1);
          font-size: 28rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 40rpx;
          margin-top: 12rpx;
        }
      }

      .text-wrapper_15 {
        background-color: rgba(248, 249, 251, 1);
        border-radius: 8px;
        margin-top: 24rpx;
        padding: 24rpx;

        .text_33 {
          overflow-wrap: break-word;
          font-size: 32rpx;
          font-weight: normal;
          text-align: left;
          white-space: nowrap;
          line-height: 44rpx;
        }
      }
    }
  }
}

.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 750rpx;
  height: 100%;

  .main-page {
    height: calc(100% - 144rpx - env(safe-area-inset-bottom));
    padding: 24rpx 0 24rpx 0;

    .list-items {
      margin-bottom: 24rpx;
      width: 100%;
      padding: 32rpx;
      background-color: #fff;

      .out-box {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
        border: 2rpx solid #E6EBF1;

        padding: 24rpx 24rpx 0 24rpx;

        .class-box {
          display: flex;
          width: 100%;
          height: 100%;

          .image {
            width: 92rpx;
            height: 92rpx;
            // background-color: #d1d1d1;

            .img {
              width: 100%;
              height: 100%;
            }
          }

          .text-wrapper {
            margin-left: 24rpx;
            flex: 1;

            .name {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #333333;
              line-height: 36rpx;
              height: 36rpx;
            }

            .teacher-name {
              margin-top: 18rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
              line-height: 40rpx;
            }

            .join-time {
              margin-top: 4rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #666666;
              line-height: 40rpx;
            }

          }

          .class-no-invide_code {
            height: 40rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #666666;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }

          .class-invide_code {
            margin-right: 40rpx;
            height: 40rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #262626;
            line-height: 40rpx;
            text-align: right;
            font-style: normal;
            position: relative;

            &.copy-btn::after {
              content: '';
              position: absolute;
              top: 4rpx;
              right: -36rpx;
              width: 32rpx;
              height: 32rpx;
              background: url("./img/copy.png") no-repeat;
              background-size: contain;
            }
          }
        }


        .class-intro {
          width: 100%;
          min-height: 128rpx;
          background: #F8F9FB;
          border-radius: 16rpx;
          padding: 24rpx;
          margin-top: 16rpx;

          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #595959;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .class-btn {
          width: 100%;
          min-height: 96rpx;
          background: #FFFFFF;
          box-shadow: inset 0rpx 1rpx 0rpx 0rpx #E6EBF1;
          margin-top: 24rpx;
          display: flex;

          .btn {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            padding: 0 auto;

            .img {
              width: 32rpx;
              height: 32rpx;
              margin-right: 16rpx;
            }
          }
        }
      }
    }

    .join-box {
      padding: 24rpx;
    }

    .join-new {
      width: 100%;
      height: 92rpx;
      background-color: #fff;
      border-radius: 12rpx;
      border: 2rpx solid #BEC4CA;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 88rpx;

      .icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 16rpx;
      }
    }
  }
}
</style>
